import { Component } from 'react';
import { Redirect, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import './index.scss';

class Detail extends Component {
    render() {
        // 获取动态路由参数  /detail/id
        let id = this.props.match.params.id;
        if (this.props.isLogin) {
            return (
                <div className="DetailWrapper">
                    <div className="detail">
                        <div className="detail-left">
                            <section>
                                <h1>{id}、Vue实战中的一些小技巧</h1>
                                <div className="userInfo flex">
                                    <img src="https://upload.jianshu.io/users/upload_avatars/3343569/6940ee65-036f-4b7a-9935-5915d9b67d14.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
                                    <div className="info flex_item">
                                        <span className="name">Mr_Liu攻城狮</span>
                                        <p>
                                            <span>2021.05.31 11:30:07</span>
                                            <span>字数 1,340</span>
                                            <span>阅读 217</span>
                                        </p>
                                    </div>
                                </div>
                                <div className="content">
                                    <p>1. 能让你首次加载更快的路由懒加载</p>
                                    <p>路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。</p>
                                    <p>2. 你是否还记得有一个叫Object.freeze的方法？</p>
                                    <p>应该所有同学都知道，vue初始化的时候会将data里面的数据都搞成响应式数据吧。但是，我们在写业务逻辑的时候会有些数据一初始化就永远不会改变，它根本就不需要被vue做成响应式数据，因此我们应该将这些不用改变的数据通过Object.freeze方法冻结它，避免vue初始化的时候，做一些无用的操作。</p>
                                </div>
                            </section>
                        </div>
                        <div className="detail-right">
                            <section>
                                <div className="userInfo flex">
                                    <img src="https://upload.jianshu.io/users/upload_avatars/3343569/6940ee65-036f-4b7a-9935-5915d9b67d14.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp" alt="" />
                                    <div className="info flex_item">
                                        <span className="name">Mr_Liu攻城狮</span>
                                        <p>
                                            <span>总资产2</span>
                                        </p>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            );
        } else {
            // 未登录则重定向到登录页，登录鉴权
            return <Redirect to="/login" />;
        }
    }
}

const mapStateToProps = state => {
    return {
        isLogin: state.getIn(['login', 'isLogin']),
    };
};

export default connect(mapStateToProps, null)(withRouter(Detail));
